<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="tree"></div>

		<script>
			let data = {
				Fish: {
					trout: {},
					salmon: {},
				},

				Tree: {
					Huge: {
						sequoia: {},
						oak: {},
					},
					Flowering: {
						'apple tree': {},
						magnolia: {},
					},
				},
			}

			// 1.使用 innerHTML 的解决方案。
			// function createTree(container, obj) {
			// 	container.innerHTML = createTreeText(obj)
			// }

			// function createTreeText(obj) {
			// 	let li = ''
			// 	let ul
			// 	for (let key in obj) {
			// 		li += '<li>' + key + createTreeText(obj[key]) + '</li>'
			// 	}
			// 	if (li) {
			// 		ul = '<ul>' + li + '</ul>'
			// 	}
			// 	return ul || ''
			// }

			// createTree(document.getElementById('tree'), data)

			// 2.使用 DOM 的解决方案。
			function createTree(container, obj) {
				if (obj) {
					let ul = document.createElement('ul')
					container.append(ul) // 将 ul 元素追加到 container 中

					for (let key in obj) {
						let li = document.createElement('li')
						li.textContent = key
						ul.append(li) // 将 li 元素追加到 ul 中
						createTree(li, obj[key])
					}
				}
			}

			createTree(document.getElementById('tree'), data)
		</script>
	</body>
</html>
